<template>
    <div class="container">

        <div class="log-header">
            <div class="logo">
                <div class="iconfont icon-xiaomi"></div>
            </div>
            <div class="log-text">小米帐号登录</div>
        </div>

        <div class="form-group">
          <input type="text" class="form-control-a" placeholder="邮箱/手机号码/小米ID"><br/>
          <input :type="pwdType" class="form-control-b"  placeholder="密码">
          <img :src="openeye" class="eye" alt="" @click="showactive()">
          <br/>
          <button class="btn login-btn" >登录</button><br/>
          <button class="btn" @click="$router.openPage('/register')">手机短信登录 / 注册</button>
        </div>
        

        
    </div>
</template>

<script>
    export default {
        name:'login',
        data(){
            return{
                active:false,
                pwdType:'password',
                openeye: require('@/assets/beye.png')
            }
        },
        methods:{
            showactive() {
                this.pwdType = this.pwdType === 'password' ? 'text' : 'password';
                this.openeye = this.openeye == require("@/assets/beye.png") ? require("@/assets/beye.png") : require("@/assets/beye.png");
            },
        }   
    }
</script>

<style lang="scss" scoped>
  .container{
      width:100vw;
      height:100vh;
      background:#F5F5F5;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
      .log-header{
        width:100%;
        .logo{
            width:1.4rem;
            height:1.4rem;
            margin:0 auto;
            font-size: 0.8rem;
            color: #fff;
            margin-top:1rem;
            background:#ff6b00;
            padding:0.3rem 0.3rem;
            box-sizing:border-box;
            border-radius:2px;
        }
        .log-text{
            text-align:center;
            font-size:0.6rem;
            color:#666;
            margin-top:0.5rem
        }
      }
      .form-group{
        width:100vw;
        padding-left:15vw;
        margin-top:0.5rem;
        position: relative;
        .form-control-a{
            width:7rem;
            border:none;
            height:1.4rem;
            padding-left:0.2rem;
            background:#F5F5F5;
            font-size:0.4rem;
            border-bottom:1px solid #d3d3d3 ;
            
        }
        .form-control-b{
            border:none;
            width:7rem;
            height:1.4rem;
            padding-left:0.2rem;
            background:#F5F5F5;
            font-size:0.4rem;
            border-bottom:1px solid #d3d3d3 ;

        }
        .eye{
            position: absolute;
			right: 3rem;
            width:0.5rem;
            height:0.5rem;
            margin:0.45rem 0;
        }
        .btn{
            width:75vw;
            line-height:1rem;
            background:#FF6700;
            border:none;
            margin-top:1rem;
            color:#fff;
            border-radius:4px;
            font-size:0.5rem;
            box-shadow:0px 4px 3px 0px rgba(93, 53, 53, 0.3);
            &:last-child{
                background:#F5F5F5;
                color:#333;
                border:1px solid #d3d3d3;
            }
            &:active{
                box-shadow:0 0 0 0;
            }
        }
      }
      
  }
</style>